<div class="container"> 
  <div *ngIf="user" nz-row nzType="flex" nzJustify="start">
    <div nz-col>
      <nz-avatar  [nzText]="user.nickName" [nzSrc]="user.avatar"
      nzSize="default" style="vertical-align: middle; margin-left: 10px; margin-top: 4px; margin-right: 10px;"></nz-avatar>    
    </div>
    <div nz-col nzSpan="20" style="text-align: left;">
      <div nz-col>
        {{user.nickName}}
      </div>
      <div nz-col>
        <nz-badge *ngIf="!(toolTip$ | async);else online" [nzCount]="offlineicon" style="vertical-align: top;">   
        </nz-badge>
        <ng-template #offlineicon>
          <i nz-icon [nzType]="'sync'" [nzSpin]="true"></i>
        </ng-template>
        <ng-template #online>
          <nz-badge  [nzCount]="onlineicon" style="vertical-align: top;"></nz-badge>  
        </ng-template>
        <ng-template #onlineicon>
          <i nz-icon [nzType]="'check-circle'" [nzTheme]="'twotone'" [nzTwotoneColor]="'#52c41a'"></i>        
        </ng-template>
      </div>             
    </div>
  </div>
  <!-- <div>
    <h2>{{toolTip$ | async}}</h2>
    <h1>{{joinRoomUser$ | async}}</h1>
    <nz-page-header nzTitle="{{toolTip$ | async}}" nzSubtitle="{{joinRoomUser$ | async}}"> </nz-page-header>
  </div> -->
  <div>
    <cdk-virtual-scroll-viewport (scrolledIndexChange)="nextBatch($event)" itemSize="73"
      class="demo-infinite-container">
      <nz-list>
        <nz-list-item *cdkVirtualFor="let item of ds">        
          <div *ngIf="item" style="min-width: 100%;">
            <div *ngIf="!item.isMe;else elseBlock" nz-row nzType="flex" nzJustify="start">
              <div nz-col>
                <nz-avatar  [nzText]="item.nickName" [nzSrc]="item.avatar"
                  nzSize="default" style="vertical-align: middle; margin-right: 10px;"></nz-avatar>
              </div>
              <div nz-col nzSpan="20" style="text-align: left;">
                <div nz-col>
                  {{item.nickName +" "+ (item.createDate | date:'short')}}
                </div>
                <div nz-col>
                  {{item.content}}
                </div>             
              </div>
            </div>
          </div>
          <ng-template #elseBlock>
              <div nz-row nzType="flex" nzJustify="end">
                <div nz-col nzSpan="20" style="text-align: right;"> 
                  <div nz-col>
                    {{item.createDate | date:'short'}}
                  </div>
                  <div nz-col>
                    {{item.content}}
                  </div>                                        
                </div>
                <div nz-col>
                  <nz-avatar  [nzSrc]="item.avatar" [nzText]="item.nickName" nzSize="default"
                    style="vertical-align: middle;margin-left: 10px;"></nz-avatar>
                </div>
              </div>
          </ng-template>
        </nz-list-item>
      </nz-list>
    </cdk-virtual-scroll-viewport>
  </div>
  <div>
    <form (ngSubmit)="onsendmsg()" #siteForm="ngForm">
      <div class="form-group">
        <label for="email">消息内容</label>
        <textarea name="sendmsg" nz-input placeholder="请输入发送的消息" [(ngModel)]="sendmsg"
          [nzAutosize]="{ minRows: 2, maxRows: 2 }"></textarea>
      </div>
      <div nz-row nzType="flex" nzJustify="start">
        <button nz-button nzSize='large' nzType="primary">发送消息</button>
      </div>
    </form>
  </div>
</div>